<template>
  <div class="version">
    <div class="version-header">
      <el-input v-model="details.keywords" style="width:200px;" placeholder="请输入搜索的内容" />
      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="add">新增</el-button>
    </div>
    <div class="version-table">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="version"
          label="版本"
        >
          <template slot-scope="scope">
            <el-tag>{{ scope.row.version }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="updatedAt"
          label="时间"
        >
          <template slot-scope="scope">
            <el-tag type="success">{{ renderTime(scope.row.updatedAt) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="desc"
          label="描述"
        >
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.desc }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="count" :page.sync="details.page" :limit.sync="details.limit" @pagination="query" />
    </div>
    <!-- dialog -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="版本号">
          <el-input v-model="form.version" autocomplete="off" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.title" type="textarea" autocomplete="off" />
        </el-form-item>
        <el-form-item label="">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="http://47.92.129.24:3001/app/upload"
            :on-remove="removeUpload"
            :on-success="successUpload"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传APK文件</div>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { versionList, versionDelete, versionAdd } from '@/api/set'
import { renderTime } from '../../utils'

export default {
  components: { Pagination },
  data() {
    return {
      listLoading: true,
      tableData: [],
      total: 10,
      count: 0,
      details: {
        page: 1,
        limit: 10,
        keywords: ''
      },
      dialogFormVisible: false,
      form: {
        title: '',
        version: '',
        apkData: ''
      },
      fileList: []
    }
  },
  watch: {
    dialogFormVisible(val) {
      this.form.title = ''
      this.form.version = ''
      this.form.apkData = ''
      this.fileList = []
    }
  },
  created() {
    this.versionTable()
  },
  methods: {
    renderTime,
    // 搜索
    search() {
      if (this.details.keywords === '') {
        this.$message.warning('搜索的内容不能为空哦')
      } else {
        this.listLoading = true
        this.versionTable()
      }
    },
    // 表格数据
    versionTable() {
      versionList({ page: this.details.page, limit: this.details.limit, keywords: this.details.keywords }).then(res => {
        const { data: { count, rows }} = res.data
        this.count = count
        this.tableData = rows
        this.listLoading = false
      }).catch(() => {})
    },
    // 删除
    handleDelete(id) {
      this.$confirm('删除该通知, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        versionDelete(id).then(res => {
          this.versionTable()
          this.$message.success('删除成功!')
        }).catch(() => {})
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 分页
    query() {
      this.listLoading = true
      this.versionTable()
    },
    // 新增
    add() {
      this.dialogFormVisible = true
    },
    // 移除上传的文件
    removeUpload() {
      this.form.apkData = ''
    },
    // 上传文件成功
    successUpload(response) {
      if (response.code === 0) {
        this.form.apkData = response.data
      } else {
        this.form.apkData = ''
      }
    },
    // 取消
    cancel() {
      this.dialogFormVisible = false
    },
    // 保存
    save() {
      versionAdd({ desc: this.form.title, version: this.form.version, downloadUrl: this.form.apkData }).then(res => {
        if (res.data.code === 0) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.versionTable()
          this.dialogFormVisible = false
          this.listLoading = true
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        }
      }).catch(() => {})
    }
  }
}
</script>

<style>
.version {
    margin-left: 20px;
}
.version-header{
    margin:20px 0 20px ;
}

</style>

